<template>
  <div class='container'>
    <!-- 弹窗 -->
    <QuestionsPreview ref="previe" :questionInfo='viewList'></QuestionsPreview>
    <p class="explain">说明：目前支持学科和关键字筛选</p>
    <el-button icon='el-icon-edit'  @click="$router.push('new')" type="success">新增试题</el-button>
    <questionsInput @getList='search'></questionsInput>
    <el-alert
      v-if="alertText !== ''"
      :title="alertText"
      type="info"
      class="alert"
      :closable="false"
      show-icon
    ></el-alert>
    <el-table
        :data="dataList"
        stripe
        style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="subject"
          label="学科"
          width="180">
        </el-table-column>
        <el-table-column
          prop="catalog"
          label="目录">
        </el-table-column>
        <el-table-column
          prop="question"
          v-slot="{row}"
          label="题干">
          <p v-html="row.question"></p>
        </el-table-column>
        <el-table-column
          prop="addDate"
          v-slot="{row}"
          width="180"
          label="录入时间">
          {{ row.addDate |  parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")}}
        </el-table-column>
        <el-table-column
          prop="difficulty"
          v-slot="{row}"
          label="难度">
          {{ row.difficulty | toDifficult }}
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人">
        </el-table-column>
        <el-table-column 
        align='center'
          v-slot="{row}"
          label="操作">
          <i class="ic el-icon-view" @click="viewfn(row.id)" style="color:blue; border-color: blue; background-color: #c6e2ff;"></i>
          <i class="ic el-icon-edit" @click="$router.push('new')" style="color:green; border-color: green; background-color: #f0f9eb;" ></i>
          <i class="ic el-icon-delete" @click="delfn(row.id)" style="color:red; border-color: red; background-color: #fef0f0;"></i>
          <i class="ic el-icon-circle-check"  @click="choiceAdd(row.id)" style="color:orange; border-color: orange; background-color: #fdf6ec;"></i>
        
        </el-table-column>
     </el-table>
        <!-- 分页 -->
    <div class="pagination">
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="stParameters.page"
      :page-sizes="[5,10]"
      :page-size="stParameters.pagesize"
      layout="total,  prev, pager, next, sizes,jumper"
      :total="10"
      >
    </el-pagination>
    </div>
  </div>
</template>

<script>
import QuestionsPreview from '../components/questions-preview'
import PageTool from '../../module-manage/components/page-tool.vue'
import { list,remove,choiceAdd,detail } from '../../api/hmmm/questions'
// import { toDifficult,parseTimeByString } from '../../filters/index'
import questionsInput from '../components/questions-input'
export default {
  name: 'QuestionsIndex',
    data() {
      return {
        total: null,
        alertText:'',
        viewList:{},
        dataList: [],  //基础题库列表
        stParameters: {
          page: 1,
          pagesize: 10,
          },
      }
    },
  components:{
    questionsInput,
    PageTool,
    QuestionsPreview
  }
  ,
  created(){
    this.getList()  //获取基础题库列表
  },
  methods:{
    async viewfn(id){
      this.$refs.previe.dialogFormV()
      const { data:res} = await detail({id})
      // console.log(res)
      this.viewList = res
    },
    async search(form){
       const { data: res } = await list(form)
      this.dataList = res.items
      this.alertText = `共 ${this.dataList.length} 条记录`

    },
    async getList(){  //获取基础题库列表
      const { data: res } = await list(this.stParameters)
      // console.log(res)
      this.dataList = res.items
      console.log(this.dataList)
      this.total = this.dataList.counts
      console.log(this.dataList.counts)
      this.alertText = `共 ${this.dataList.length} 条记录`
      // console.log(this.alertText)
    },
      handleSizeChange(val) {
        this.stParameters.pagesize = val
        console.log(`每页 ${val} 条`);
        this.getList()
      },
      handleCurrentChange(val) {
       this.stParameters.page = val
        // console.log(`当前页: ${val}`);
        this.getList()
      },
      async delfn(id){
        console.log(id)
        await this.$confirm('此操作将永久删除题' + ', 是否继续？' , '提升', {
          type: 'warning'
        })
        await remove({id})
        this.$message.success('成功删除')
        this.getList()
      }
      ,async choiceAdd(id){
        await this.$confirm('此操作将加入精选题库, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        })
        await choiceAdd({id:id,choiceState:1})
        this.$message.success('加入精选题库成功')
        this.getList()

      }

  },
}
</script>


<style scoped lang='less'>
.container{
  background-color: #fff;
  position: relative;
  margin-top: 15px;
  padding-top: 60px;
  margin-left: 12px;
  margin-right: 12px;
   .el-button--success{
    position: absolute;
    top: 5px;
    right: 5px;
   } 
  .explain{
    color: #ffc0cb;
    font-size: 14px;
    position: absolute;
    top: 10px;
    left: 20px;
  }
  // 字体图标
  .ic{
    text-align: center;
    width: 25px;
    height: 25px;
    border: 1px solid #000;
    border-radius: 50%;
    line-height: 25px;
    text-align: center;
    margin-right: 5px;
    background-color: #ffc0cb;
    cursor: pointer;
  }

}
 .alert {
  margin: 10px 0px;
}
::v-deep .el-pagination__total{
  display: none !important;
}
.pagination{
  display: flex;
  flex-direction: row-reverse;
}
</style>
